<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>xz_admin_login管理员登录</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="shortcut icon" href="favicon.ico">
		<style type="text/css">
			/* 公有样式 */
			/* CSS 样式重置 */
			* {
				margin: 0;
				padding: 0;
			}
			/* 响应式公共样式 */
			body {
				background-color: #f7f7f7;
				color: #73879c;
				/* 文本对齐:居中 */
				text-align: center;
			}
			.login {
				/* 弹性布局 */
				display: flex;
				height: 100vh;
				/* 主轴居中 */
				justify-content: center;
				/* 交叉轴也居中 */
				align-items: center;
			}
			.login input {
				/* 清除外轮廓线 */
				outline: none;
				/* 变为块级 */
				display: block;
				/* 防止边框和内间距设置怪异盒子 */
				box-sizing: border-box;
				border-radius: 3px;
			}
				/* 背景图片 */
				.login{
				background-image: url(scale.jpg);
				/* background-size: cover; */
				/* background-size: auto ; */
				background-size: contain ;
			}
			/* 一定要注意顺序,先写小再写大 */
			/* 移动端小于576px*/
			@media (max-width:576px) {
				.center {
					width: 86vw;
				}
				.login h1 {
					height: 20vh;
					font-size: 10vw;
				}
				.login .enter {
					height: 38vh;
					margin-bottom: 8vh;
				}
				.login .enter input {
					height: 8vh;
					width: 100%;
					font-size: 4vw;
					border: 1px solid #ddd;
					padding: 0 10px;
					margin-bottom: 2vh;
				}
				.login .enter button {
					display: block;
					height: 8vh;
					width: 100%;
					background-color: #73879c;
					border: 1px solid #ddd;
					color: #fff;
					font-size: 5vw;
					border-radius: 4vh;
				}
				.login .foot {
					margin-bottom: 2vh;
				}
				.login .foot img {
					vertical-align: middle;
					margin-right: 5px;
				}
				.login .foot+p {
					font-size: 3vw;
				}
			} 
			/* PAD端*/
			@media(min-width:576px){
				.center {
					width: 350px;
				}
				.center h1 {
					height: 100px;
					font-size: 30px;
					color: aqua;
				}
				.center input {
					border: 1px solid #ddd;
					height: 38px;
					width: 100%;
					font-size: 13px;
					margin-bottom: 20px;
					padding-left: 10px;
					border-radius: 3px;
				}
				.center button {
					width: 175px;
					height: 40px;
					font-size: 16px;
					border-radius: 3px;
					border: 1px solid #ddd;
				}
				.center .foot {
					margin: 40px 0 20px;
				}	
				.center .foot img {
					vertical-align: middle;
				}
			}
				 
			/* PC端	 */
			/* PC大于960px */
			@media (min-width:960px){
				.center {
					width: 300px;
				}
				.center h1 {
					height: 100px;
				}
				.center input {
					width: 100%;
					height: 40px;
					margin-bottom: 26px;
					padding-left: 10px;
					border: 1px solid #ddd;
					border-radius: 3px;
				}
				.center button {
				width: 100%;
				background-color: #efefef;
				font-size: 16px;
				border-radius: 3px;
				}
				.center .foot {
					margin: 40px 0 20px;
					font-size: 20px;
				}
				.center .foot img {
					margin-right: 10px;
				}
				.center p {
					font-size: 14px;
				}
			}
		</style>
	</head>
	<body>
		<div class="login">
			
			<div class="center">
				
				<h1>管理员登录</h1>
				<div class="enter">
						<input type="text" placeholder="管理员账号" v-model="admin.adminName">
						<input type="password" placeholder="管理员密码" v-model="admin.password">
						<button @click="login()">登录</button>
				</div>
				<div class="foot">
					<img src="logo-mi2.png" style="width: 30px">
					<span>MI商城后台管理系统</span>
				</div>
				<p>&copy;2022版权所有 TEDU.CN</p>
			</div>
		</div>
	</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    let v=new Vue({
        el:"body>div",
        data:{
        	admin:{adminName:"",password:""}
        },
      methods:{
        	login(){
        		axios.post("/admin/login",v.admin).then(function (response) {
						if (response.data == 1) {
							v.$message.success("登录成功!");
							//转到后台管理页面,链接后补
							location.href = "/";
						} else if (response.data == 2) {
								v.$message.error("密码错误!还剩");
						} else {
							v.$message.error("此管理员不存在!");
						}
				})
			}
      }
    })
</script>
</html>
